<template>
  <div id="container">
    <Header />
    <SiderBar />
    <div>
      订单管理

      <input type="file" @change="changevideo" />
      <video
        id="videoPlayer"
        controls
        style="width: 78px; max-height: 78px"
      ></video>
      <img class="img" :src="imgSrc" alt="" />
    </div>
  </div>
</template>

<script>
import Header from "@/components/HeaderTemplate";
import SiderBar from "@/components/SiderBar.vue";
export default {
  components: { SiderBar, Header },
  data() {
    return {
      imgSrc: "",
      url: "",
    };
  },

  methods: {
    changevideo(e) {
      var video = e.target.files[0];
      // console.log(e, video);
      var url = URL.createObjectURL(video);
      // console.log(url);
      document.getElementById("videoPlayer").src = url;
      this.creatImg();
      console.log(url);
    },
    creatImg() {
      setTimeout(() => {
        const video = document.getElementById("videoPlayer");
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        ctx.drawImage(video, 0, 0, 100, 100);
        this.imgSrc = canvas.toDataURL("image/png"); // console.log('imgSrc ' + imgHeight + ' ' + imgWidth) // console.log(this.imgSrc);
        var blob = this.dataURLtoBlob(this.imgSrc, "image/png"); //base64转blob，全局函数
        var file = new File([blob], "video_image.png", {
          type: "image/png",
          lastModified: Date.now(),
        }); //blob转file
        console.log(file);
        return file;
      }, 200);
    },
  },
};
</script>

<style>
.img {
  background-color: #ccc;
}
</style>